import React, { Component } from 'react'
import ReactDom from 'react-dom'

// class Hooks extends Component {
//     state = {
//         count: 0
//     }
//     render() {
//         return (
//             <div>
//                 <h1>当前求和为：{this.state.count}</h1>
//                 <button onClick={this.add}>+2</button>
//             </div>
//         )
//     }
//     add = () => {
//         const { count } = this.state
//         this.setState({ count: count + 2 })
//     }
// }


function Hooks() {

    // 1.useState
    // 第一次调用这个方法时，值会被缓存，后续不再重置为 0
    // 第一个返回值是 state，第二个是修改方法
    const [count, setCount] = React.useState(0)
    const [name, setName] = React.useState('zx')

    const add = () => setCount(c => c + 2)// setCount(count + 2)

    // 2.React.useEffect：生命周期钩子 DidMount、DidUpdate、WillUnmount 的组合
    React.useEffect(()=>{
        let interval = setInterval(()=>{
            setCount(c => c + 1)
        },500)
        console.log('DidMount')
        return  ()=> {
            console.log('WillUnmount')
            clearInterval(interval)
        }
    },[])
    // count 改变时调用
    React.useEffect(()=>console.log('DidUpdate'),[count])

    // 4.useRef
    const ref = React.useRef()

    return (
        <div>
            <h1>name：{name}</h1>
            <h1>当前求和为：{count}</h1>
            <button onClick={add}>+2</button>
            <input type="text" ref={ref} />
            <button onClick={()=>ReactDom.unmountComponentAtNode(document.getElementById('root'))}>卸载</button>
            <button onClick={()=>console.log(ref.current.value)}>ref</button>
        </div>
    )
}

export default Hooks